<template>
  <view class="content">
    <image class="logo" :src="imageSrc" @click="chooseImageTap"></image>
    
    <view class="button-group">
		<button
		  class="btn" 
		  @click="chooseImageTap"
		>
		选择图片显示
		</button>
      <button 
        class="btn" 
        @click="previewImageTap"
      >
        预览图片
      </button>
      <button 
        class="btn" 
        @click="getImageInfoTap"
      >
        获取图片信息
      </button>
    </view>

    
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      imageSrc: '/static/logo.png',
      choosedImags: [] 
    }
  },
  methods: {
    chooseImageTap() {
      uni.chooseImage({
        count: 2,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (result) => {
          this.choosedImags = result.tempFilePaths;
          this.imageSrc = result.tempFilePaths[0];
          console.log('选中图片的临时路径：', result.tempFilePaths);
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        }
      });
    },
    

    previewImageTap() {
      if (this.choosedImags.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      
      uni.previewImage({
        urls: this.choosedImags,
        current: 0,
        loop: true,
        success: () => {
          console.log('预览图片成功');
        },
        fail: (err) => {
          console.error('预览图片失败：', err);
          uni.showToast({
            title: '预览失败',
            icon: 'none'
          });
        }
      });
    },
    

    getImageInfoTap() {
      if (this.choosedImags.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      
      uni.getImageInfo({
        src: this.choosedImags[0],
        success: (info) => {
          console.log('图片信息：', info);
          uni.showToast({
            title: '已获取图片信息',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('获取图片信息失败：', err);
          uni.showToast({
            title: '获取失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}

.logo {
  height: 300rpx;
  width: 300rpx;
  border-radius: 60%;
  overflow: hidden;
  margin-bottom: 20rpx;
  border: 1px solid #eee;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  margin-bottom: 40rpx;
  width: 80%;
}

.btn {
		width: 80%;
		appearance: button;
		-webkit-appearance: button;
		padding: 8rpx 0;
		text-align: center;
		border: 1px solid #ddd;
		border-radius: 4rpx;
		background-color: #f8f8f8;
		color: #333;
		font-size: 32rpx;
		text-decoration: none;
	}
.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>